<template>
    <view class="page">
        <view class="tabs">
            <view
                class="item"
                v-for="(tab, tabIndex) in dataList"
                :key="tab.id"
                @click="onChangeType(tabIndex, tab)"
                :class="{ active: tabIndex == advice_typeIndex }"
              >
                <view class="icon" v-if="tab.icon">
                    <image
                        :src="
                          tabIndex == advice_typeIndex
                            ? tab.activeIcon || tab.icon
                            : tab.icon
                        "
                        mode="widthFix"
                        class="img"
                      />
                </view>
                <view class="name">
                    {{ tab.label }}
                </view>
            </view>
        </view>

        <view class="main">
            <form :model="dataForm" ref="form" class="form">
                <view class="maintenance-record-add-view">
                    <view class="field-view">
                        <view class="field">
                            <view class="field-label"> 我要反馈 </view>
                        <view class="field-value field-desc">
                            <textarea
                              class="input desc"
                              type="textarea"
                              v-model="dataForm.description"
                              placeholder="您想说点什么?"
                            />
                            <Upload
                              :imgList="dataForm.img"
                              :showDelete="true"
                              :imgCount="9"
                              @uploadSuccess="onUpload"
                              @deleteImg="onDelete"
                              :uploadHeight="140"
                              :uploadWidth="140"
                            >
                            </Upload>
                        </view>
                    </view>
                </view>
                <view class="field-view view-other">
                    <view class="field">
                        <view class="field-label"> 联系人 </view>
                        <view class="field-value">
                            <input
                              class="input"
                              type="text"
                              v-model="dataForm.contact_name"
                              placeholder="联系人"
                            />
                         </view>
                    </view>
                </view>
                <view class="field-view view-other">
                    <view class="field">
                        <view class="field-label"> 联系电话 </view>
                            <view class="field-value">
                                <input
                                  class="input"
                                  type="text"
                                  v-model="dataForm.contact_mobile"
                                  placeholder="联系电话"
                                />
                            </view>
                        </view>
                    </view>
                 </view>
            </form>
        </view>
        <Message ref="message"></Message>

        <view class="fixed">
            <view class="submit-btn" :class="{ active: !disabled }" @click="submit">
                提交
            </view>
        </view>
    </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import { postProblemFeedbackRecord } from "@/common/api/problem-feedback-record.js";
import Upload from "@/components/public/upload";
import { imgBaseUrl, imgBaseUrlV0, imgBaseUrlV2 } from "@/common/config";
export default {
  mixins: [viewModule],
  components: {
    Upload,
  },
  data() {
    return {
      imgBaseUrlV0,
      imgBaseUrlV2,
      advice_typeIndex: -1,
      dataForm: {
        advice_type: "",
        contact_name: "",
        contact_mobile: "",
        description: "",
        img: [],
      },
      typeLabel: "问题类型",
      mixinViewOptions: {
        getURL: "/adviceType",
        isPage: false,
        isShowLoading: true,
        reachBottom: true,
        createdIsNeed: true,
        pullDown: true,
      },
    };
  },
  computed: {
    disabled() {
      let form = this.dataForm;
      if (form.advice_type === "" || !form.contact_name || !form.contact_mobile)
        return true;
      return false;
    },
  },
  onLoad() {},
  methods: {
    fetchComplete(err, data = []) {
      let arr = [
        {
          icon: "fankui_xitong2x.png",
          activeIcon: "fankui_xitong2x.png",
        },
        {
          icon: "fankui_guzhang_h2x.png",
          activeIcon: "fankui_guzhang_h2x.png",
        },
        {
          icon: "fankui_zhanghao2x.png",
          activeIcon: "fankui_zhanghao2x.png",
        },
        {
          icon: "fankui_jianyi2x.png",
          activeIcon: "fankui_jianyi2x.png",
        },
        {
          icon: "fankui_shangwu2x.png",
          activeIcon: "fankui_shangwu2x.png",
        },
      ];
      data.forEach((i, index) => {
        i.label = i.name;
        i.value = i.id;
        let item = arr[index];
        if (item) {
          i.icon = this.imgBaseUrlV2 + item.icon;
          i.activeIcon = this.imgBaseUrlV2 + item.activeIcon;
          // Object.assign(i, );
        }
        // i.icon =
      });
      if (data.length && !this.dataForm.advice_type) {
        this.dataForm.advice_type = "";
        // data[0].value
      }
    },
    onChangeType(index, item) {
      this.typeLabel = item.label;
      this.advice_typeIndex = index;
      this.dataForm.advice_type = item.value;
    },
    onUpload(e) {
      console.log(e, "?e");
      this.dataForm.img.push(e.url);
    },
    onDelete(index) {
      console.log("delete");
      this.dataForm.img.splice(index, 1);
    },
    submit() {
      let form = this.dataForm;
      if (form.advice_type === "") return this.message.error("请选择反馈分类!");
      if (form.description === "") return this.message.error("请填写反馈内容");
      if (form.contact_name === "") return this.message.error("请填写联系人");
      if (form.contact_mobile === "") return this.message.error("请填写联系电话");
      uni.showLoading({
        title: "加载中",
      });

      postProblemFeedbackRecord(this.dataForm)
        .then((res) => {
          uni.hideLoading();
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "提交反馈失败");
          }
          return this.showModal({
            title: "提示",
            content: "提交成功,点击确认返回上一页",
            showCancel: false,
            success: (r) => {
              this.$Router.go(-1);
            },
          });
        })
        .catch((err) => {
          uni.hideLoading();
          return this.message.error("提交反馈失败");
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

.page {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0d1523 0%, #102945 100%);
  padding-bottom: 30rpx;
}

.view-other {
  padding-top: 20rpx;
}

.main {
  position: relative;
  z-index: 2;
  margin-bottom: 90rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .form {
    .maintenance-record-add-view {
      margin: 0 30rpx;
      border-radius: 10rpx;
      padding-bottom: 30rpx;

      .field-view {
        position: relative;
        display: flex;
        flex-direction: row;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .field {
          flex: 1;

          &:nth-child(2) {
            margin-left: 90rpx;
          }

          .field-label {
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: bold;
            color: color-white;
            margin-bottom: 28rpx;
          }

          .field-value {
            position: relative;
            background-color: #1B345F;
            border-radius: 10rpx;

            .input {
              display: block;
              padding: 20rpx 20rpx;
              line-height: 50rpx;
              font-size: 32rpx;
              color: color-white;
            }

            &.field-desc {
              padding: 20rpx 16rpx 1rpx;

              .input {
                padding: 0;
              }
            }

            .desc {
              height: 200rpx;
            }
          }
        }
      }
    }
  }
}

.fixed {
  position: fixed;
  z-index: 3;
  width: 100%;
  bottom: 0;
  left: 0;
  padding: 0 24rpx;
  margin-bottom: 30rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.submit-btn {
  display: block;
  background: #1B345F;
  line-height: 90rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 700;
  font-size: 36rpx;
  border-radius: 10rpx;
  color: #fff;
  text-align: center;

  &.active {
    background-color: #3f7dff;
  }
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  padding: 30rpx 24rpx;

  > .item {
    flex: 0 0 220rpx;
    height: 140rpx;
    background: #1B345F;
    border-radius: 10rpx;
    color: color-white;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    margin-right: 20rpx;
    margin-bottom: 20rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    &.active {
      background: #3f7dff;
      color: #fff;
    }

    > .icon {
      > .img {
        display: block;
        width: 44rpx;
        height: 44rpx;
        margin: 22rpx auto;
      }
    }

    >.name {
      text-align: center;
      line-height: 1;
    }
  }
}
</style>